<template>
  <el-card>
    <div>浏览记录</div>
  </el-card>


  <div style="margin-top: 10px">
    <el-input style="width: 300px;" class="w-50 m-2" placeholder="请输入内容" :prefix-icon="Search" max="15" change=""> </el-input>
    <el-button success>搜索</el-button>
    <div style="float: right">
      <el-button type="danger"  @click="showDelete=0" v-if="showDelete">批量删除</el-button>

      <template v-else>
        <el-button @click="showDelete=1">取消</el-button>
        <el-button>确定</el-button>
        <el-button>全选</el-button>
      </template>
    </div>
  </div>

  <div class="right-b-b-item" >
    <div class="right-b-b-item-left">
      <div class="right-b-b-item-left-lf">
        <img :style="{width: '169px',height:'101px'}">
      </div>
      <div class="right-b-b-item-left-rh">
        <div>
          <span> 美丽神话</span>
        </div>
        <div>
          <span style="font-size: 14px; color: rgb(125, 128, 144);">作品</span>
        </div>
        <div class="right-b-b-item-left-rh-bom">
          <div class="right-b-b-item-left-rh-bom-t">
          </div>
          <span>作者</span>
        </div>
      </div>
    </div>
    <div class="right-b-b-item-cen">
      <span>时间</span>
    </div>
    <div class="right-b-b-item-right">
      <span>删除</span>
    </div>

  </div>

  <hr>
</template>




<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "index",
});
</script>

<script setup lang="ts">
import { ref } from 'vue'

const showDelete = ref(1)
</script>

<style lang="scss" scoped>
.right-b-b-item {
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  //border-bottom: #7d8090 1px solid;

  .right-b-b-item-left {
    width: 700px;
    padding: 8px;
    display: flex;
    justify-content: space-between;

    .right-b-b-item-left-lf {
      width: 169px;
      height: 101px;
    }

    .right-b-b-item-left-rh {
      width: 465px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-size: 16px;
      .right-b-b-item-left-rh-bom {
        display: flex;
        align-items: center;

        .right-b-b-item-left-rh-bom-t {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }
    }
  }

  .right-b-b-item-cen {
    width: 200px;
    display: flex;
    justify-content: flex-end;
  }

  .right-b-b-item-right {
    width: 120px;
    display: flex;
    padding-right: 20px;
    justify-content: flex-end;
  }


  .router-div{
    margin: 10px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
}
</style>
